<template>
  <component :is="elIconComponent" v-if="elIconComponent" :name="name" :size="size" :color="color" style="width: 20px;height: 20px;" />
</template>

<script>
import { defineComponent, computed } from 'vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

export default defineComponent({
  name: 'DynamicIcon',
  props: {
    name: {
      type: String,
      required: true,
      validator: (value) => {
        // 这里可以添加自定义验证逻辑
        return typeof value === 'string';
      }
    },
    // 可以添加其他 Element UI Icon 支持的 props
    size: {
      type: [Number, String],
      default: undefined
    },
    color: {
      type: String,
      default: undefined
    }
  },
  setup(props) {
    // 动态解析图标组件
    const elIconComponent = computed(() => {
      const iconName = props.name;
      
      // 处理可能的别名或不同命名风格
      const formattedIconName = formatIconName(iconName);
      
      // 从 Element Plus 图标库中查找
      return ElementPlusIconsVue[formattedIconName] || null;
    });

    // 格式化图标名称（处理不同命名风格）
    const formatIconName = (name) => {
      if (!name) return '';
      
      // 移除可能的 el-icon 前缀
      let formatted = name.replace(/^el-icon-/, '');
      
      // 转换为 PascalCase
      formatted = formatted
        .split('-')
        .map(part => part.charAt(0).toUpperCase() + part.slice(1))
        .join('');
      
      return formatted;
    };

    return {
      elIconComponent
    };
  }
});
</script>

<style scoped>
.dynamic-icon-warning {
  color: #f56c6c;
  font-size: 12px;
}
</style>